<template>
	<div class="catalog">
		<div class="start">
			<p><span>全部目录&nbsp;</span>&nbsp;&nbsp;/杂志目录</p>
		</div>
		<div class="detail">
			<img :src="magazineHome.cover" />
			<div class="detail-rig">
				<h3>{{magazineHome.periodNumber}}</h3>
				<p>卷首语：{{magazineHome.title}}&nbsp;<router-link :to="{path:'/magazine/catalog/list/'+this.magazineHome.id,query:this.magazineHome.id}" id="shidu">试读</span></router-link>
				
				<!-- <div>Using mustaches:{{magazineHome.firstContent}}</div> -->
				
				<p>我曾看过一篇文章，说在“二战”期间，一群流浪汉保护了原本计划被炸毁的科隆大教堂。我最初以为是夸大其词，结果是真的。</p>
				
				<p>当时，许多无家可归的流浪汉，每天晚上栖身于科隆大教堂地下的甬道。“二战”后期，盟军决定轰炸德军在西线的据点科隆。科隆人纷纷逃离。流浪汉知道无力保护大教堂不被炸毁，于是决定将教堂的彩色玻璃画都拆卸下来，保存起来留给后人。</p>
				
				<p>他们不分昼夜地奋战，就在快要拆到最高层的时候，盟军的轰炸机呼啸而至。这些流浪汉放弃逃命的机会，继续拆卸，好几个人仅绑着一根绳子，整个身体悬在塔外，而轰炸机近在咫尺。</p>
			</div>
		</div>
		<div class="contact-us">
			<h1>杂志目录</h1>
			<h2>Magazine Catalogue</h2>
		</div>
		<div class="bottom">
			<div>
				<detail v-for="(item,i) in catalog1" :key="i" :detail="item"></detail>
			</div>
			<div>
				<detail v-for="(item,i) in catalog2" :key="i" :detail="item"></detail>
			</div>
		</div>
		<footerA></footerA>
	</div>
</template>

<script>
	import detail from '../../components/detail/detail.vue'
	import {mapState,mapActions} from 'vuex'
	export default{
		name:'catalog',
		data(){
			return{
				id:'',
				catalog1:[],
				catalog2:[]
			}
		},
		components:{
			detail
		},
		computed:{
			...mapState(['magazineHome','catalog'])
		},
		
		mounted(){
			let len = Math.ceil(this.catalog.length/2)
			// console.log(len)
			this.catalog1 = this.catalog.slice(0,5)
			this.catalog2 = this.catalog.slice(5,this.catalog.length)
			// console.log(this.magazineHome)
			let obj = {
				id:this.$route.params.id
			}
			this.queryCatalog(obj)
			this.queryMagazineHome(obj)
		},
		methods:{
			...mapActions(['queryCatalog','queryMagazineHome'])
		}
	}
</script>

<style scoped>
	.catalog{
		width: 100vw;
		margin: 0;
		margin-top: 86px;
	}
	.detail{
		text-align: left;
		display: flex;
		width: 75vw;
		height: 380px;
		margin: 0 auto;
		box-shadow: 0 0 1px 2px rgb(245,250,245);
		background-color: #FCFCFC;
	}
	.start{
		padding-top: 10px;
		margin-left: 12.5vw;
		height: 60px;
	}
	.detail-rig{
		margin-left: 30px;
	}
	.start>p>span{
		color: darkgray;
	}
	.detail>img{
		width: 220px;
		height: 330px;
		margin: 10px 0 0 20px;
	}
	
	.contact-us {
		margin-top: 100px;
		text-align: center;
		height: 120px;
	}
	
	.contact-us>h1 {
		font-size: 50px;
		margin: 6px 0;
		font-weight: 400;
		color: rgba(0,0,0,0.6);
	}
	
	.contact-us>h2 {
		opacity: 0.1;
		font-size: 60px;
		font-weight: 500;
		z-index: -1;
		position: relative;
		top: -80px;
		letter-spacing: 6px;
	}
	.bottom{
		margin: 0 auto;
		display: flex;
		padding-top: 50px;
		width: 75vw;
		justify-content: space-between;
		flex-wrap: wrap;
		/* flex-direction: column; */
		padding-bottom: 100px;
		
	}
	#shidu{
		display: inline-block;
		padding: 4px;
		border: 1px solid #00B24F;
		color: #00B24F;
		border-radius: 3px;
		margin-left: 5px;
		font-size: 14px;
	}
	#shidu:hover{
		background-color: #00B24F;
		color: white;
		cursor: pointer;
	}
</style>
